<template>
	<view class="wrap">
		<u-navbar
			fixed
			safeAreaInsetTop
			placeholder
			bgColor="transparent"
			:title="detailInfo.name"
			leftIconColor="#fff"
			titleStyle="#fff"
			autoBack
		>
		</u-navbar>
		<image :src="detailInfo.raceBg" v-if="detailInfo.raceBg" class="top-img"></image>
		<view class="top-img" v-else :style="{ background: detailInfo.raceColor || defaultBg }"></view>
		<view class="content-box">
			<view class="top">
				<u-swiper
					:list="detailInfo.focusArr"
					height="286rpx"
					circular
					indicator
					:indicatorActiveColor="detailInfo.raceColor || '#0071c5'"
					indicatorMode="dot"
				></u-swiper>
			</view>
			<view class="main">
				<view class="flex-between">
					<view class="main-locate">
						<u-icon
							name="map-fill"
							color="#0071c5"
							size="16"
							:label="detailInfo.region ? detailInfo.region.split('-')[1] : '--'"
							labelSize="28rpx"
							labelColor="#333"
						></u-icon>
						<i :class="'qi-' + weatherInfo.icon" style="font-size: 66rpx; margin: 20rpx 0 8rpx"></i>
						<!-- 天气文字描述 -->
						<view style="font-size: 28rpx">
							{{ weatherInfo.text || '--' }} {{ weatherInfo.temp || '--' }}℃
						</view>
					</view>
					<view class="main-time">
						<text class="main-time-txt">距离比赛开始还有</text>
						<u-count-down
							:time="timeShow"
							format="DD:HH:mm:ss"
							autoStart
							millisecond
							@change="onChange"
						>
							<view class="time">
								<view class="time__custom">
									<view
										class="time__custom__item"
										:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
									>
										{{ timeData.days > 9 ? timeData.days : '0' + timeData.days }}
									</view>
									<text class="time__custom__desc">Days</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<view
										class="time__custom__item"
										:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
									>
										{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours }}
									</view>
									<text class="time__custom__desc">Hours</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<view
										class="time__custom__item"
										:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
									>
										{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes }}
									</view>
									<text class="time__custom__desc">Mins</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<view
										class="time__custom__item"
										:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
									>
										{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds }}
									</view>
									<text class="time__custom__desc">Secs</text>
								</view>
							</view>
						</u-count-down>
					</view>
				</view>

				<view class="grid">
					<view class="grid-item" @click="onInfoHandel('报名须知')">
						<image src="/static/zhushou_xz.png" class="grid-item-img"></image>
						<text class="grid-item-txt">报名须知</text>
					</view>
					<view class="grid-item" style="margin: 0 16rpx" @click="onInfoHandel('路线图')">
						<image src="/static/zhushou_lx.png" class="grid-item-img"></image>
						<text class="grid-item-txt">路线图</text>
					</view>
					<view class="grid-item" @click="onInfoHandel('竞赛规程')">
						<image src="/static/zhushou_gz.png" class="grid-item-img"></image>
						<text class="grid-item-txt">竞赛规程</text>
					</view>
					<view
						class="grid-item grid-item-big"
						@click="$utils.navigateTo(true, `/pages/saishi/detail?id=${detailInfo.id}`)"
					>
						<image src="/static/zhushou_bm.png" class="grid-item-img"></image>
						<text class="grid-item-txt">立即报名</text>
					</view>
					<view
						class="grid-item grid-item-big"
						style="margin-left: 16rpx"
						@click="$utils.navigateTo(true, '/pagesA/my/order/list?raceId=' + detailInfo.id)"
					>
						<image src="/static/zhushou_dd.png" class="grid-item-img"></image>
						<text class="grid-item-txt">我的订单</text>
					</view>
				</view>
			</view>

			<view class="list" v-if="articleList.length">
				<view class="list-title">活动新闻</view>
				<view
					class="list-item"
					v-for="item in articleList"
					:key="item.id"
					@click="$utils.navigateTo(false, `/pages/news/detail?id=${item.id}`)"
				>
					<image
						:src="item.pic || '/static/default_serve.png'"
						class="list-item-r"
						mode="aspectFill"
					></image>
					<u-text
						:text="item.atitle"
						block
						lines="2"
						color="#333"
						size="28rpx"
						margin="22rpx 6rpx 0"
					></u-text>
				</view>
				<u-loadmore :status="status" line marginTop="18" />
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			imgUrl: app.globalData.ossUrl,
			defaultBg: 'linear-gradient(0deg, #f7f7f7 0%, #ffffff 20%, #549fd8 100%)',
			detailInfo: {},
			timeData: {},
			timeShow: '',
			articleList: [],
			status: 'loadmore',
			weatherInfo: {}
		}
	},
	onLoad(options) {
		this.getInfo(options.id)
		this.getWeatherInfo(options.id)
	},
	onReachBottom() {
		// if (this.status !== 'nomore') {
		// 	this.page++
		// 	this.getArticleData()
		// }
	},
	methods: {
		getInfo(id) {
			uni.showLoading({ title: '数据加载中' })
			/* prettier-ignore */
			this.$https(false, 'get', {
				url: '/race/race/info/'+id
			}, (res) => {
				res.data.focusArr = res.data.focus?JSON.parse(res.data.focus):[]
				this.detailInfo = res.data
				this.timeShow = new Date(res.data.start).getTime() -  new Date().getTime()
			})
			/* prettier-ignore */
		},
		getWeatherInfo(id) {
			/* prettier-ignore */
			this.$https(false, 'get', {
				url: '/race/other/weather/'+id
			}, (res) => {
				this.weatherInfo= res.data
			})
			/* prettier-ignore */
		},
		onChange(e) {
			this.timeData = e
		},
		onInfoHandel(type) {
			let info = null
			if (type === '报名须知') {
				info = this.detailInfo.raceRemind
			} else if (type === '路线图') {
				info = this.detailInfo.raceLine
			} else if (type === '竞赛规程') {
				info = this.detailInfo.raceRule
			}
			uni.navigateTo({
				url: '/pages/saishi/detailInfo',
				events: {
					childEvent: (data) => console.log('子页面数据:', data)
				},
				success: (res) => {
					res.eventChannel.emit('parentEvent', { type, info })
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	position: relative;
}
.top {
	width: calc(100% - 56rpx);
	padding: 14rpx 28rpx;
	&-img {
		display: block;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		height: 580rpx;
	}
}
.main {
	padding: 20rpx 26rpx;
	&-locate {
		width: 226rpx;
		height: 212rpx;
		padding-top: 24rpx;
		border-radius: 12rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	&-time {
		width: 448rpx;
		height: 206rpx;
		padding-top: 30rpx;
		border-radius: 12rpx;
		background-color: #fff;
		&-txt {
			display: block;
			text-align: center;
			font-size: 30rpx;
			color: #333;
			margin-bottom: 28rpx;
		}
	}
}
.time {
	display: flex;
	margin: 0 auto;
	&__custom {
		display: flex;
		flex-direction: column;

		&__item {
			width: 74rpx;
			height: 60rpx;
			line-height: 62rpx;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 600;
			color: #fff;
			margin: 0 !important;
		}
		&__desc {
			text-align: center;
			display: block;
			margin: 16rpx 0 0 !important;
			width: 74rpx;
			color: #bebebe;
		}
	}

	&__doc {
		color: #333 !important;
		margin: 0 14rpx !important;
		font-weight: 600;
		font-size: 30rpx;
		line-height: 60rpx !important;
	}
}
.grid {
	display: flex;
	flex-wrap: wrap;
	margin-top: 28rpx;
	&-item {
		width: 220rpx;
		height: 180rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&-img {
			display: block;
			width: 60rpx;
			height: 60rpx;
			margin-top: 6rpx;
		}
		&-big {
			width: 338rpx;
			margin-top: 20rpx;
		}
		&-txt {
			display: block;
			margin-top: 14rpx;
			font-size: 28rpx;
			color: #0071c5;
		}
	}
}
.flex {
	display: flex;
	align-items: center;
}
.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list {
	padding: 24rpx 26rpx 10rpx;
	&-title {
		font-size: 30rpx;
		text-align: center;
		margin-bottom: 24rpx;
	}
	&-item {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 16rpx;
		&-r {
			display: block;
			width: 100%;
			height: 226rpx;
		}
	}
}
.content-box {
	position: relative;
	z-index: 2;
}
::v-deep {
	.u-navbar__content__title {
		color: #fff !important;
	}
}
</style>
